<template>
  <div>
    <el-cascader :options="options" clearable @change="change" v-model="v_distpicker" :filterable="filterable"
      :show-all-levels="showAllLevels"></el-cascader>
  </div>
</template>

<script>

import DEFAULT_PROVINCE from './province'
import DEFAULT_CITY from './city'
import DEFAULT_AREA from './area'
export default {
  name: "Distpicker",
  data() {
    return {
      options: [],
      v_distpicker: null
    }
  },
  model: {
    prop: "value",
    event: "updateValue"
  },
  props: {
    value: {
      type: [String, Array, Object],
      default: null,
    },
    type: {
      type: String,
      default: "name"
    },
    level: {
      type: [String, Number],
      default: 2
    }, filterable: {
      type: Boolean,
      default: true,
    }, showAllLevels: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.v_distpicker = null; 
        }
        if (this.type == "name") {
          if (this.v_distpicker instanceof Array) {
            if (!this.v_distpicker.includes(newVal)) {
              this.v_distpicker = newVal;
            }
          }else {
            this.v_distpicker  =newVal;
          }
        } else if (this.type == "json") {
          if (this.type instanceof Object) {
            if (this.level === 1) {
              this.v_distpicker = newVal.province;
            } else if (this.level === 2) {
              this.v_distpicker = newVal.city;
            } else if (this.level === 3) {
              this.v_distpicker = newVal.area;
            }
          }
        }
      },
      immediate: true,
    }
  },
  mounted() {
    for (let province in DEFAULT_PROVINCE) {
      let data = {
        label: DEFAULT_PROVINCE[province],
        value: DEFAULT_PROVINCE[province],
        code: province
      }
      this.options.push(data)
      if (Number(this.level) == 1) {
        continue;
      }
      data.children = [];
      for (let city in DEFAULT_CITY) {
        if (city == province) {
          for (let city_key in DEFAULT_CITY[city]) {
            let city_data = {
              label: DEFAULT_CITY[city][city_key],
              value: DEFAULT_CITY[city][city_key],
              code: city_key,
              parent_label: DEFAULT_PROVINCE[province],
              parent_code: province
            }
            data.children.push(city_data)
            if (Number(this.level) == 2) {
              continue;
            }
            city_data.children = []
            for (let area in DEFAULT_AREA) {
              if (city_key == area) {
                for (let area_key in DEFAULT_AREA[area]) {
                  let area_data = {
                    label: DEFAULT_AREA[area][area_key],
                    value: DEFAULT_AREA[area][area_key],
                    code: area_key,
                    parent_label: DEFAULT_CITY[city][city_key],
                    parent_code: city_key
                  }
                  city_data.children.push(area_data)
                }

              }
            }
          }
        }
      }

    }
  },
  computed: {

  },
  methods: {
    getData(data) {
      if (this.type == "name") {
        return data[Number(this.level) - 1];
      } else if (this.type == "list") {
        return data;
      } else if (this.type == "json") {
        return { "province": data[0], "city": data[1], "area": data[2] }
      } else if (this.type == "join") {
        return data.join(",")
      } else {
        throw Error("type is not [name,array,json,join]")
      }
    },
    change(data) {
      this.$emit('updateValue', this.getData(data))
    }
  }
};
</script>
<style scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}
</style>